<script>
	$(document).ready(function(){
/* CHANGE TEXT SETTING */
		$("#h3_page_title").text("Manajemen Top Up Deposit");
		$("#breadcrumb_title").html("Manajemen Top Up Deposit");
/* END CHANGE TEXT SETTING */
/* DECLARE VARIABLE */
		var theme = "fresh";
		var managedeposit_grid = $("#managedeposit_grid");
		var managedeposit_windowaddedit = $("#managedeposit_windowaddedit");
		var managedeposit_addeditform = $("#managedeposit_addeditform");
		var managedeposit_actionfield = $("#managedeposit_actionfield");
		var managedeposit_idfield = $("#managedeposit_idfield");
		var managedeposit_namafield = $("#managedeposit_namafield");
		var managedeposit_keteranganfield = $("#managedeposit_keteranganfield");
		var managedeposit_buttonsave = $("#managedeposit_buttonsave");
		var managedeposit_buttonreset = $("#managedeposit_buttonreset");
		var validasi_save = $("#validasi_save");
		var validasi_reset = $("#validasi_reset");
		var form_validasi = $("#form_validasi");
/* END DECLARE VARIABLE */
/* SETTING VALIDATOR */
	managedeposit_addeditform.jqxValidator({
		theme : theme,
		rules : [
			{ input: '#managedeposit_namafield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#managedeposit_keteranganfield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
		]
	});
/* END SETTING VALIDATOR */
/* SETTING THEME AND TYPE */
	// button type
		managedeposit_buttonreset.jqxButton({ theme : theme, width : 100, height : 25});
		managedeposit_buttonsave.jqxButton({ theme : theme, width : 100, height : 25});
		validasi_save.jqxButton({ theme : theme, width : 100, height : 25});
		validasi_reset.jqxButton({ theme : theme, width : 100, height : 25});
	// grid type
		var managedeposit_listsource = {
			id : 'managedeposit_listsource',
			url : 'c_managedeposit/data_managedeposit?key=',
			datatype : 'json',
			root : 'results',
			datafields : [
				{ name : 'tiket_id'},
				{ name : 'tiket_kode'},
				{ name : 'tiket_users'},
				{ name : 'tiket_genkode'},
				{ name : 'tiket_rupiah'},
				{ name : 'tiket_gentgl'},
				{ name : 'tiket_genexp'},
				{ name : 'tiket_status'},
				{ name : 'tiket_paidtgl'},
				{ name : 'id'},
				{ name : 'username'},
				{ name : 'email'},
			]
		}
		var managedeposit_listadapter = new $.jqx.dataAdapter(managedeposit_listsource);
		managedeposit_grid.jqxGrid({
			theme : theme,
			width : 800,
			source : managedeposit_listadapter,
			filterable : true,
			autoheight : true,
			sortable : true,
			pageable : true,
			showtoolbar : true,
			toolbarHeight : 40,
			columns : [
				{ text : 'Nama User', datafield : 'username', width : 150, align : 'center'},
				{ text : 'Email User', datafield : 'email', width : 300, align : 'center'},
				{ text : 'Id Tiket', datafield : 'tiket_id', width : 100, hidden : true},
				{ text : 'Jumlah Deposit', datafield : 'tiket_rupiah', align : 'center'},
				{ text : 'Approve', datafield : 'tiket_approve', align : 'center',width : 100, columntype : 'button', cellsrenderer : function(){
						return 'Approve';
					}, buttonclick : function(row){
						var record = managedeposit_grid.jqxGrid('getrowdata', row);
						$("#validasi_idtiket").val(record.tiket_id);
						$("#nominal_customer").val('');
						form_validasi.jqxWindow('open');
					}
				},
			],
			rendertoolbar : function(toolbar){
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				var managedeposit_add = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managedeposit_addbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/add.png'><span style='margin-left:10px;'>Tambah</span></div>");
				var managedeposit_edit = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managedeposit_editbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/edit.png'><span style='margin-left:10px;'>Ubah</span></div>");
				var managedeposit_delete = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managedeposit_deletebutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/delete.png'><span style='margin-left:10px;'>Hapus</span></div>");
				var managedeposit_searchtext = $("<input type='text' class='jqx-input jqx-rc-all' id='managedeposit_searchtext' style='height:27px; float:left;'>");
				var managedeposit_search = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managedeposit_searchbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/search.png'><span style='margin-left:10px;'>Cari</span></div>");
				var managedeposit_refresh = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managedeposit_refreshbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/refresh.png'><span style='margin-left:10px;'>Refresh</span></div>");
				toolbar.append(container);
				container.append(managedeposit_add);
				container.append(managedeposit_edit);
				container.append(managedeposit_delete);
				container.append(managedeposit_searchtext);
				container.append(managedeposit_search);
				container.append(managedeposit_refresh);
				managedeposit_add.click(function(){
					reset_form();
					managedeposit_actionfield.val("managedeposit_add");
					managedeposit_windowaddedit.jqxWindow('open');
				});
				managedeposit_edit.click(function(){
					var rowindex = managedeposit_grid.jqxGrid('getselectedrowindex');
					var record = managedeposit_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						managedeposit_actionfield.val("managedeposit_edit");
						managedeposit_idfield.val(record.managedeposit_id);
						managedeposit_namafield.val(record.managedeposit_nama);
						managedeposit_keteranganfield.val(record.managedeposit_keterangan);
						managedeposit_windowaddedit.jqxWindow('open');
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				managedeposit_delete.click(function(){
					var rowindex = managedeposit_grid.jqxGrid('getselectedrowindex');
					var record = managedeposit_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						var managedeposit_id = record.managedeposit_id;
						if(window.confirm('Apakah anda yakin menghapus data ini ?')){
							$.ajax({
								url : 'c_managedeposit/action',
								type : 'POST',
								data : {
									managedeposit_id : managedeposit_id,
									action : 'managedeposit_delete'
								},success : function(msg){
									var result = eval(msg);
									if(msg == 1){
										show_alert("Save Success...", "Data berhasil disimpan...");
										refresh_grid();
									}else{
										show_alert("Save Failed...", "Data gagal disimpan...");
									}
								}
							});
						}
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				managedeposit_search.click(function(){
					var key = managedeposit_searchtext.val();
					managedeposit_listsource['url'] = 'c_managedeposit/data_managedeposit?key=' + key;
					managedeposit_listadapter.dataBind();
				});
				managedeposit_refresh.click(function(){
					managedeposit_searchtext.val('');
					managedeposit_listsource['url'] = 'c_managedeposit/data_managedeposit?key=';
					managedeposit_grid.jqxGrid('updatebounddata');
				});
			}
		});
	// window type
		managedeposit_windowaddedit.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 400,
			height : 400,
			isModal : true,
			cancelButton : managedeposit_buttonreset
		});
		form_validasi.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 400,
			height : 150,
			isModal : true,
			cancelButton : validasi_reset
		});
/* END SETTING THEME AND TYPE */
/* DECLARE FUNCTION */
		function refresh_grid(){
			managedeposit_grid.jqxGrid('updatebounddata');
		}
		function reset_form(){
			managedeposit_actionfield.val('');
			managedeposit_idfield.val('');
			managedeposit_namafield.val('');
			managedeposit_keteranganfield.val('');
			managedeposit_addeditform.jqxValidator('hide');
		}
	// Function onclick button
		managedeposit_buttonreset.click(function(){
			reset_form();
		});
		managedeposit_buttonsave.click(function(){
			var managedeposit_id = "";
			var managedeposit_nama = "";
			var managedeposit_keterangan = "";
			var managedeposit_action = "";
			managedeposit_id = managedeposit_idfield.val();
			managedeposit_nama = managedeposit_namafield.val();
			managedeposit_keterangan = managedeposit_keteranganfield.val();
			managedeposit_action = managedeposit_actionfield.val();
			$.ajax({
				url : 'c_managedeposit/action',
				type : 'POST',
				data : {
					managedeposit_id : managedeposit_id,
					managedeposit_nama : managedeposit_nama,
					managedeposit_keterangan : managedeposit_keterangan,
					action : managedeposit_action
				},success : function(msg){
					var result = eval(msg);
					if(msg == 1){
						managedeposit_windowaddedit.jqxWindow('close');
						show_alert("Save Success...", "Data berhasil disimpan...");
						refresh_grid();
					}else{
						show_alert("Save Failed...", "Data gagal disimpan...");
					}
				}
			});
		});
		validasi_save.click(function(){
			var nominal_user = $("#nominal_customer").val();
			var validasi_idtiket = $("#validasi_idtiket").val();
			$.ajax({
				url : 'c_managedeposit/action',
				type : 'POST',
				data : {
					nominal_user : nominal_user,
					validasi_idtiket : validasi_idtiket,
					action : 'updatedeposit'
				},success : function(msg){
					var result = eval(msg);
					if(msg == 1){
						form_validasi.jqxWindow('close');
						show_alert("Save Success...", "Data berhasil disimpan...");
						refresh_grid();
					}else{
						show_alert("Save Failed...", "Data gagal disimpan...");
					}
				}
			});
		});
/* END DECLARE FUNCTION */
/* DECLARE ALERT WINDOW */
		var managedeposit_alertwindow = $("#managedeposit_alertwindow");
		var managedeposit_alertheader = $("#managedeposit_alertheader");
		var managedeposit_alertcontent = $("#managedeposit_alertcontent");
		var managedeposit_alertbutton = $("#managedeposit_alertbutton");
		managedeposit_alertbutton.jqxButton({ theme : theme, width : 100, height : 25});
		managedeposit_alertwindow.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 300,
			height : 150,
			isModal : true,
			okButton : managedeposit_alertbutton
		});
		function show_alert(header, content){
			managedeposit_alertheader.html(header);
			managedeposit_alertcontent.html(content);
			managedeposit_alertwindow.jqxWindow('open');
		}
/* END DECLARE ALERT WINDOW */
	});
</script>
<div id="managedeposit_content">
	<div class="row-fluid">
		<div class="span8">
			<div id="managedeposit_grid"></div>
			<div id="managedeposit_windowaddedit" class="must_empty">
				<div>Form tambah / ubah managedeposit</div>
				<div>
					<form id="managedeposit_addeditform">
						<input type="hidden" id="managedeposit_actionfield">
						<input type="hidden" id="managedeposit_idfield">
						<table>
							<tr>
								<td>Nama managedeposit</td>
								<td><input type="text" id="managedeposit_namafield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td>Keterangan managedeposit</td>
								<td><textarea id="managedeposit_keteranganfield" style="height:70px;width:202px;"></textarea></td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="button" id="managedeposit_buttonsave" value="Simpan">
									<input type="reset" id="managedeposit_buttonreset" value="Reset">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="managedeposit_alertwindow">
		<div id="managedeposit_alertheader"></div>
		<div>
			<div id="managedeposit_alertcontent" style="height:80px;"></div>
			<input type="button" id="managedeposit_alertbutton" value="OK" style="margin-left:100px;" />
		</div>
	</div>
	<div id="form_validasi" class="must_empty">
		<div id="validasi_deposit">Validasi Deposit</div>
		<div>
			<form>
			<table>
				<input type="hidden" id="validasi_idtiket">
				<tr>
					<td>Nominal yang ditransfer : </td>
					<td><input type="text" class="jqx-input jqx-rc-all" id="nominal_customer"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" id="validasi_save" value="Validasi" />
						<input type="reset" id="validasi_reset" value="Batal" />
					</td>
				</tr>
			</table>
			</form>
		</div>
	</div>
</div>